<!-- src/components/Sidebar.svelte -->
<script lang="ts">
	import * as commands from '$lib/commands'
	import { page } from '$app/stores'
	import { Sidebar, SidebarGroup, SidebarItem, SidebarWrapper } from 'flowbite-svelte'
	import {
		ChartPieSolid,
		GridSolid,
		MailBoxSolid,
		UserSolid,
		ShoppingBagSolid,
		ArrowRightToBracketOutline,
		EditOutline,
		FireSolid,
		BookSolid,
		RestoreWindowOutline,
		LifeSaverSolid,
		RefreshOutline,
		ChartMixedDollarSolid,
		UserSettingsOutline,
		ListOutline,
		BackwardStepSolid,
		CartPlusOutline,
	} from 'flowbite-svelte-icons'
	import { onMount } from 'svelte'
	import type { Unsubscriber } from 'svelte/store'
	import { historyStore } from './FudaStore'
	import type { FudaHistoryFilter, IpcResponse, ListParams } from './bindings'
	import type { FudaHistory } from './bindings/FudaHistory'

	let spanClass = 'flex-1 ms-3 whitespace-nowrap'
	$: activeUrl = $page.url.pathname
	let activeClass =
		'flex items-center p-1 text-base font-normal text-primary-900 bg-primary-200 dark:bg-primary-700 dark:text-white hover:bg-primary-100 dark:hover:bg-gray-700'
	let nonActiveClass =
		'flex items-center p-1 text-base font-normal text-gray-500  dark:text-white hover:bg-green-100 dark:hover:bg-green-700'
	let subscription: Unsubscriber
	let history: FudaHistory[] | null = []
	onMount(() => {
		// 订阅 klineResultStore 存储
		subscription = historyStore.subscribe(async (state) => {
			console.log('(Sidebar.svelte) subscribe historyStore state', state)

			try {
				// Define the argument
				const args: ListParams<FudaHistoryFilter> = {
					page: 0,
					size: 7,
					filter: null,
				}

				const res = await commands.list_history(args)

				if (res.error) {
					// If the response status is not OK, throw an error
					throw new Error(`(Sidebar.svelte) list_history Server returned an error: ${res.error}`)
				}

				history = res.result?.data || []

				console.log('(Sidebar.svelte) list_history res=', res)
			} catch (error) {
				console.error('(Sidebar.svelte) list_history Error:', error)
			}
		})
	})
</script>

<Sidebar {activeUrl} {activeClass} {nonActiveClass} asideClass="w-16 min-h-svh">
	<SidebarWrapper
		divClass="overflow-y-auto py-2 px-0 bg-gray-500  bg-gray-900 min-h-screen flex flex-col"
	>
		<SidebarGroup ulClass="flex-none">
			<SidebarItem href="/" class="flex flex-col ms-0 text-xs text-wrap items-center">
				<svelte:fragment slot="icon">
					<ChartPieSolid
						class="w-8 h-8 text-red-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
					/>
					<p class="text-xs text-wrap text-center">主页</p>
				</svelte:fragment>
			</SidebarItem>
			<SidebarItem href="/securities" class="flex flex-col ms-0 text-xs text-wrap items-center">
				<svelte:fragment slot="icon">
					<ListOutline
						class="w-8 h-8 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
					/>
					<p class="text-xs text-wrap text-center">证券</p>
				</svelte:fragment>
			</SidebarItem>
			<SidebarItem href="/strategies" class="flex flex-col ms-0 text-xs text-wrap items-center">
				<svelte:fragment slot="icon">
					<MailBoxSolid
						class="w-8 h-8 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
					/>
					<p class="text-xs text-wrap text-center">策略</p>
				</svelte:fragment>
			</SidebarItem>
			<SidebarItem href="/tbots/|" class="flex flex-col ms-0 text-xs text-wrap items-center">
				<svelte:fragment slot="icon">
					<UserSolid
						class="w-8 h-8 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
					/>
					<p class="text-xs text-wrap text-center">机器</p>
				</svelte:fragment>
			</SidebarItem>
			<SidebarItem href="/positions" class="flex flex-col ms-0 text-xs text-wrap items-center">
				<svelte:fragment slot="icon">
					<EditOutline
						class="w-8 h-8 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
					/>
					<p class="text-xs text-wrap text-center">持仓</p>
				</svelte:fragment>
			</SidebarItem>
			<SidebarItem href="/indicators" class="flex flex-col ms-0 text-xs text-wrap items-center">
				<svelte:fragment slot="icon">
					<ArrowRightToBracketOutline
						class="w-8 h-8 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
					/>
					<p class="text-xs text-wrap text-center">指标</p>
				</svelte:fragment>
			</SidebarItem>
		</SidebarGroup>
		<SidebarGroup border ulClass="flex-none">
			{#if history}
				{#each history as hi, i (hi.id)}
					{#if hi.entity_type === 'SECURITY'}
						<SidebarItem
							href="/securities/{hi.entity_id}"
							class="flex flex-col ms-0 text-xs text-wrap items-center"
						>
							<svelte:fragment slot="icon">
								<ChartMixedDollarSolid
									class="w-8 h-8 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
								/>
								<p class="text-xs text-wrap text-center">{hi.entity_name}</p>
							</svelte:fragment>
						</SidebarItem>
					{:else if hi.entity_type == 'TBOT'}
						<SidebarItem
							href="/tbots/{hi.entity_id}"
							class="flex flex-col ms-0 text-xs text-wrap items-center"
						>
							<svelte:fragment slot="icon">
								<CartPlusOutline
									class="w-8 h-8 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
								/>
								<p class="text-xs text-wrap text-center">{hi.entity_name}</p>
							</svelte:fragment>
						</SidebarItem>
					{/if}
				{/each}
			{/if}
			<SidebarItem href="/history" class="flex flex-col ms-0 text-xs text-wrap items-center">
				<svelte:fragment slot="icon">
					<ListOutline
						class="w-8 h-8 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
					/>
					<p class="text-xs text-wrap text-center">访问历史</p>
				</svelte:fragment>
			</SidebarItem>
		</SidebarGroup>
		<SidebarGroup border ulClass="flex-none">
			<SidebarItem
				on:click={() => location.reload()}
				class="flex flex-col ms-0 text-xs text-wrap items-center"
			>
				<svelte:fragment slot="icon">
					<RefreshOutline
						class="w-8 h-8 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
					/>
					<p class="text-xs text-wrap text-center">刷新</p>
				</svelte:fragment>
			</SidebarItem>

			<SidebarItem class="flex flex-col ms-0 text-xs text-wrap items-center">
				<svelte:fragment slot="icon">
					<UserSettingsOutline
						class="w-8 h-8 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
					/>
					<p class="text-xs text-wrap text-center">设置</p>
				</svelte:fragment>
			</SidebarItem>
		</SidebarGroup>
	</SidebarWrapper>
</Sidebar>
